<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #app p {
        line-height: 50px;
        margin-left: 40px;
    }

    ul {

        width: 600px;
        height: 400px;
    }

    li {
        text-align: center;
        line-height: 60px;
        margin-top: 15px;

    }

    ul li span {
        width: 100px;
        height: 70px;
        border: solid 1px #000;
        display: inline-block;
        margin-left: 5px;
    }

    .zhe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .zhe_box {
        width: 500px;
        height: 500px;
        background: #fff;
        position: absolute;
        top: -100px;
        left: 20%;
        margin-left: 250px;
        margin-top: 250px;
    }
</style>

<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="userInfo.name"></p>

        <p>年龄：<input type="text" v-model="userInfo.age"></p>
        <p>
            性别：<select v-model="userInfo.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </p>
        <p> <button @click="Add">添加/修改</button></p>
        <div class="aa">
            <ul>
                <li><span>序号</span><span>姓名</span><span>年龄</span><span>性别</span><span>操作</span></p>
                <li v-for="(item, index) in arr" :key="index"><span>{{index+1}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.age}}</span>
                    <span>{{item.sex}}</span>
                    <span>
                        <button @click="deletea(index)">删除</button>
                        <button @click="gai(item)">修改</button>
                    </span>
                </li>
                <p v-if="arr.length==0">暂无数据</p>
            </ul>
        </div>


        <div class="zhe" v-if="isShow">
            <div class="zhe_box">
                <p>姓名：<input type="text" v-model="gaiuserinfo.name"></p>

                <p>年龄：<input type="text" v-model="gaiuserinfo.age"></p>
                <p>
                    性别：<select v-model="gaiuserinfo.sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </p>
                <p> <button @click="queren">确认</button><button @click="quxiao">取消</button></p>
            </div>
        </div>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {
                name: "",
                age: "",
                sex: "",
            },
            gaiuserinfo: {
                name: "",
                age: "",
                sex: "",
            },
            isShow: false,
            arr: [
                {
                    id: 1,
                    name: '刘紫欣',
                    age: 20,
                    sex: '女',
                },
                {
                    id: 2,
                    name: '秦傻逼',
                    age: 20,
                    sex: '男',
                },
                {
                    id: 3,
                    name: '王月娜',
                    age: 20,
                    sex: '女',
                },
            ]
        },
        methods: {
            Add() {
                this.arr.push(this.userInfo);
            },
            deletea(index) {
                this.arr.splice(index, 1);
            },
            gai(item) {
                let newitem = { ...item };
                this.gaiuserinfo = newitem;
                this.isShow = true;
            },
            queren() {
                let newarr = [...this.arr];
                newarr.forEach(item => {
                    if (item.id == this.gaiuserinfo.id) {
                        item.id = this.gaiuserinfo.id
                        item.name = this.gaiuserinfo.name
                        item.age = this.gaiuserinfo.age
                        item.sex = this.gaiuserinfo.sex
                    }
                })
                this.arr = newarr;
                this.quxiao();

            },
            quxiao() {
                this.isShow = false;
                this.gaiuserinfo = {
                    name: "",
                    age: "",
                    sex: "",
                }
            }
        },

    })
</script>

</html>